<script setup>

const navList =[
   {title:'推荐',path:'/index'},
   {title:'男生',path:'/index'},
   {title:'女生',path:'/community'},
   {title:'图书',path:'/welfare'},
   {title:'新书',path:'/welfare'},
   {title:'最新上架',path:'/welfare'}
]

</script>

<template>
   <div class="header">
      <div class="header-search">
         <div class="search-list">
            <i class="iconfont icon-sousuo"></i>
            <input type="text" placeholder="请输入书名、作者">
         </div>
      </div>
      <van-sticky> 
         <!-- vant粘性布局 -->
         <ul class="header-tabs">
            <li v-for="(v,i) in navList" :key="i">
               <router-link :to="v.path">
                  <p>{{v.title}}</p>
               </router-link>
            </li>
         </ul>
      </van-sticky>
      <div>
         <img src="@/assets/images/header.jpg" alt="">
      </div>
   </div>
</template>

<style scoped>
</style>